<template>
    <div class="bg-white goods_create" style="margin: -20px; margin-top:-1rem; margin-bottom: 0!important;">
        <router-link :to="{ path: './list' }" style="position: absolute;top: 12px;left: 200px;">
            <el-button size="mini">回到商品列表</el-button>
        </router-link>
        <el-form label-width="80px" class="text-align-left">
            <el-form-item label="商品规格">
                <el-radio-group size="mini" :value="skus_type" @input="vModel('skus_type', $event)">
                    <el-radio-button :label="0">单一规格</el-radio-button>
                    <el-radio-button :label="1">多规格</el-radio-button>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <!-- 单规格 封装在single-attrs中-->
        <template v-if="skus_type === 0">
            <el-form label-width="80px" class="text-align-left mt-3">
                <el-form-item label="市场价格">
                    <el-input type="number" placeholder="请输入内容" v-model="sku_value.oprice" class="w-25">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="销售价格">
                    <el-input type="number" placeholder="请输入内容" v-model="sku_value.pprice" class="w-25">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="成本价格">
                    <el-input type="number" class="w-25" placeholder="请输入内容" v-model="sku_value.cprice">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="商品重量">
                    <el-input type="number" placeholder="请输入内容" v-model="sku_value.weight" class="w-25">
                        <template slot="append">公斤</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="商品体积">
                    <el-input type="number" placeholder="请输入内容" v-model="sku_value.volume" class="w-25">
                        <template slot="append">立方米</template>
                    </el-input>
                </el-form-item>
            </el-form>
        </template>

        <!-- 多规格 -->
        <template v-else>
            <!-- 规格卡片 -->
            <el-form label-width="80px" class="text-align-left">
                <el-form-item label="添加规格">
                    <sku-card v-for="(item, index) in sku_card" :key="index" :item="item" :index="index"
                        :total="skuCardTotal"></sku-card>

                    <el-button type="success" class="mt-3" size="mini" @click="addSkuCardEvent">添加规格</el-button>
                </el-form-item>

                <el-form-item label="批量设置">
                    <template v-if="!updateAllStatus">
                        <el-button type="text" v-for="(btn, btnIndex) in updateList" :key="btnIndex"
                            @click="openUpdateAllStatus(btn)">{{ btn.name }}</el-button>
                    </template>

                    <div v-else class="d-flex alin-items-center">
                        <el-input size="small" style="width:150px;margin-right:20px" type="number"
                            :placeholder="UpdateAllPlaceholder" v-model="updateAllValue"></el-input>
                        <el-button type="primary" size="mini" @click="UpdateAllSubmit">设置</el-button>
                        <el-button size="mini" @click="closeUpdateAllStatus">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
            <sku-table class="ml-5" ref="table"></sku-table>
        </template>
        <el-button text="primary" style="position: fixed; bottom: 50px; right: 50px;" @click="submit">
            提交
        </el-button>
    </div>
</template>
<script>
// 解构vuex
import { mapState, mapMutations } from 'vuex';

// import singleAttrs from '@/components/shop/create/single-attrs.vue';
import skuCard from '@/components/shop/create/sku/sku-card.vue';
import skuTable from '@/components/shop/create/sku-table.vue';

export default {
    name: "createGoods",
    inject: ['app', 'layout'],
    components: { skuCard, skuTable },
    data() {
        return {
            id: 0,
            // 单规格的参数
            sku_value: {
                oprice: 0,
                pprice: 0,
                cprice: 0,
                weight: 0,
                volume: 0,
            },
            // 批量修改状态
            updateAllStatus: false,
            UpdateAllPlaceholder: '',
            updateAllValue: '',
            updateList: [{
                name: '销售价',
                key: 'pprice'
            }, {
                name: '市场价',
                key: 'oprice'
            }, {
                name: '成本价',
                key: 'cprice'
            }, {
                name: '库存',
                key: 'stock'
            }, {
                name: '体积',
                key: 'volumne'
            }, {
                name: '重量',
                key: 'weight'
            },]
        }
    },
    computed: {
        ...mapState('goods_create', {

            skus_type: state => state.skus_type,

            sku_card: state => state.sku_card,

            goods_attrs: state => state.goods_attrs,

        }),
        //    其他计算属性
        skuCardTotal() {
            return this.sku_card.length;
        }
    },
    created() {
        this.id = this.$route.params.id
        if (!this.id) {
            this.$message.error('非法参数')
            return this.$router.push({
                name: 'shop-goods-list'
            })
        }
        this.layout.showLoading()
        let defaultVal = ['属性值', '#FFFFFF', '/favicon.ico']
        // 初始化操作
        this.$axios.get('/admin/goods/read/' + this.id, { token: true }).then((res) => {
            // console.log(data);
            let data = res.data.data
            console.log(data);
            this.vModel('sku_card', data.goodsSkuCard.map(item => {
                item.list = item.goodsSkuCardValue
                item.list.map(v => {
                    v.text = item.type === 0 ? v.value : defaultVal[0]
                    v.color = item.type === 1 ? v.value : defaultVal[1]
                    v.image = item.type === 2 ? v.value : defaultVal[2]
                    return v
                })
                return item
            }))
            this.vModel('skus_type', data.sku_type)
            this.sku_value = data.sku_value ? data.sku_value : {
                oprice: 0,
                pprice: 0,
                cprice: 0,
                weight: 0,
                volume: 0,
            }
            this.$nextTick(() => {
                if (this.$refs.table.list) {
                    this.$refs.table.list = data.goodsSkus
                }

            })

            this.layout.hideLoading()
        }).catch(() => {
            this.layout.hideLoading()
        })

    },
    methods: {
        // 修改state方法二
        ...mapMutations('goods_create', [
            'addSkuCard',
            'vModelState',
            'vModelGoodsAttrs'
        ]),
        // 重写了addSkuCard方法
        addSkuCardEvent() {
            this.layout.showLoading()

            this.$axios.post('/admin/goods_skus_card', {
                goods_id: this.id,
                name: '规格名称',
                order: 50,
                type: 0
            }, {
                token: true
            }).then((res) => {
                this.layout.hideLoading()

                let data = res.data.data
                data.list = []
                this.addSkuCard(data)

            }).catch(() => {
                this.layout.hideLoading()
            })
        },
        // 修改表单的值
        vModel(key, value) {
            this.vModelState({
                key,
                value
            })
        },
        // 修改批量设置的状态
        openUpdateAllStatus(item) {
            this.UpdateAllPlaceholder = item.name
            this.updateAllStatus = item.key
        },
        // 取消批量设置状态
        closeUpdateAllStatus() {
            this.updateAllStatus = false
            this.updateAllValue = ''
        },
        // 提交批量设置
        UpdateAllSubmit() {
            this.$refs.table.list.forEach(item => {
                item[this.updateAllStatus] = this.updateAllValue
            })
            this.closeUpdateAllStatus()
        },
        submit() {
            // console.log(this.$refs.table.list);
            let list = []
            if (this.$refs.table) {
                list = this.$refs.table.list.map(item => {
                    item.goods_id = this.id
                    return item
                })
            }

            this.layout.showLoading()
            this.$axios.post('/admin/goods/updateskus/' + this.id, {
                sku_type: this.skus_type,
                sku_value: this.sku_value,
                goodsSkus: list
            }, {
                token: true
            }).then(() => {
                this.layout.hideLoading()
                // console.log(res);

                this.$message.success('修改成功')
                return this.$router.push({
                    name: 'shop-goods-list'
                })
            }).catch((err) => {
                this.$message.error(err)
                this.layout.hideLoading()
            })
        }

    }
}
</script>
<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
</style>